<template>
  <div>
    <Dialog :visible="visibleBindRules" :title="visibleProductTitle + ' - ' +  $t('绑定规则')" :footer="false" width="70%"
            @close="bindRulesClose">
      <el-form :model="listPage" ref="listPage" label-width="80px">
        <el-row :gutter="24">
          <el-col :span="20" style="padding: 0">
            <el-col :span="8" :xs="24">
              <el-form-item :label="$t('配置项')" prop="rulesKey">
                <el-input v-model="listPage.rulesKey" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item :label="$t('关键词查询')" prop="describe" label-width="100px">
                <el-input v-model="listPage.describe" clearable/>
              </el-form-item>
            </el-col>
            <el-col :span="8" :xs="24">
              <el-form-item :label="$t('规则类型')" prop="type">
                <el-select style="width: 100%" v-model="listPage.type">
                  <el-option :value="0" :label="$t('新客')"></el-option>
                  <el-option :value="1" :label="$t('老客')"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="4" :xs="24" style="text-align: right">
            <el-button type="primary" @click="getRulesList">{{ $t('查询') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <div style="margin: 10px 0;text-align: right">
        <el-button type="primary" @click="batchDelete" v-show="$permiss[982]">{{ $t('批量删除') }}</el-button>
        <el-button type="primary" @click="addRulesService" v-show="$permiss[395]">{{ $t('新增') }}</el-button>
        <el-button type="primary" @click="multiplexService" v-show="$permiss[397]">{{ $t('复用') }}</el-button>
      </div>
      <Table :page="listPage" :table-data="bindRules.tableData" @handleCurrentChange="rulesCurrentChange"
             @handleSizeChange="rulesSizeChange" :selection="true" :select-rows="deleteSelectRows"
             @handleSelectionChange="(val)=>{deleteSelectRows=val}" :table-column="bindRules.tableColumn">
        <template slot="operate">
          <el-table-column :label="$t('规则值')" align="center">
            <template slot-scope="{row}">
              <div v-if="!row.rulesValueVice">{{ row.rulesValue }}</div>
              <div v-else>{{ row.rulesValue + ' - ' + row.rulesValueVice }}</div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('操作')" align="center">
            <template slot-scope="{row}">
              <el-button type="text" @click="editRulesService(row)" v-show="$permiss[399]">{{ $t('编辑') }}</el-button>
              <el-button type="text" @click="delRulesService(row)" v-show="$permiss[396]">{{ $t('删除') }}</el-button>
            </template>
          </el-table-column>
        </template>
      </Table>
      <Dialog :visible.sync="addRulesVisible" width="60%" :title="$t('新增规则')" :append-body="true"
              @cancel="addRulesVisible = false" @confirm="addRulesConfirm" @close="addRulesClear">
        <el-form :model="addPage" ref="addPage">
          <el-row :gutter="24">

            <el-col :span="20" style="padding: 0">
              <el-col :span="8" :xs="24">
                <el-form-item label-width="60px" :label="$t('配置项')" prop="rulesKey">
                  <el-input v-model="addPage.rulesKey" clearable/>
                </el-form-item>
              </el-col>
              <!--              <el-col :span="8" :xs="24">-->
              <!--                <el-form-item label-width="60px" :label="$t('新客')" prop="type">-->
              <!--                  <el-select style="width: 100%" v-model="addPage.type">-->
              <!--                    <el-option :value="0" :label="$t('新客')"></el-option>-->
              <!--                    <el-option :value="1" :label="$t('老客')"></el-option>-->
              <!--                  </el-select>-->
              <!--                </el-form-item>-->
              <!--              </el-col>-->
              <el-col :span="8" label-width="80px" :xs="24">
                <el-form-item :label="$t('关键词查询')" prop="describe" label-width="100px">
                  <el-input v-model="addPage.describe" clearable/>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="4" style="text-align: right">
              <el-button type="primary" @click="addRulesService">{{ $t('查询') }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <Table :page="addPage" :selection="true" :select-rows="addRules.selectRows"
               @handleSelectionChange="addRulesSelectRows"
               @handleSizeChange="addRulesSizeChange"
               @handleCurrentChange="addRulesCurrentChange"
               :table-data="addRules.tableData"
               :table-column="addRules.tableColumn"></Table>
      </Dialog>
      <Dialog :visible.sync="editRulesVisible" :title="$t('编辑机审规则')" :append-body="true"
              @cancel="editRulesVisible = false" @confirm="editRulesConfirm">
        <el-form label-width="80px" ref="editRules" :model="editRules">
          <el-form-item :label="$t('配置项')">
            {{ editRules.rulesKey }}
          </el-form-item>
          <el-form-item :label="$t('规则描述')">
            {{ editRules.rulesDescribe }}
          </el-form-item>
          <el-form-item :label="$t('规则值')">
            <el-input v-if="editRules.rulesType === 0" v-model="editRules.rulesValue"/>
            <el-row v-else :gutter="24">
              <el-col :span="11" style="padding: 0">
                <el-input v-model="editRules.rulesValue"/>
              </el-col>
              <el-col :span="1" style="text-align: center;padding: 0">~</el-col>
              <el-col :span="11" style="padding: 0">
                <el-input v-model="editRules.rulesValueVice"/>
              </el-col>
            </el-row>
          </el-form-item>
          <el-alert
              style="margin-top: 15px"
              :title="editRules.rulesValueDescribe"
              type="info"
              show-icon
              :closable="false">
          </el-alert>
        </el-form>
      </Dialog>
      <Dialog :visible.sync="multiplexVisible" :title="$t('复用规则给选中的APP')" :append-body="true"
              @cancel="multiplexVisible = false" @confirm="multiplexConfirm"
              @close="multiplexForm.selectRows = []">
        <Table :table-data="multiplexForm.tableData" :page="false" :selection="true"
               :select-rows="multiplexForm.selectRows"
               @handleSelectionChange="(value)=>{
                    multiplexForm.selectRows = value
                 }">
          <el-table-column prop="appName" :label="$t('APP名称')" align="center"></el-table-column>
        </Table>
      </Dialog>
    </Dialog>
  </div>
</template>

<script>
import {deepClone} from "@/utils/tools";
import {
  selectProductRules,
  selectRules,
  addProductRules,
  reuseProductRules,
  deleteProductRulesList,
  deleteProductRules,
  updateProductRules
} from '@/api/product'
import {selectProduct} from "@/api/system";

export default {
  data() {
    return {
      listPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        type: 0
      },
      bindRules: {
        tableData: [],
        tableColumn: [
          {label: this.$t('配置项'), prop: 'rulesKey', align: 'center'},
          {label: this.$t('规则描述'), prop: 'rulesDescribe', align: 'center', minWidth: "200"},
          {label: this.$t('修改时间'), prop: 'updateTime', align: 'center', minWidth: "200"},
        ],
      },
      addRulesVisible: false,
      addPage: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      addRules: {
        tableData: [],
        tableColumn: [
          {label: this.$t('配置项'), prop: 'rulesKey', align: 'center'},
          {label: this.$t('规则描述'), prop: 'rulesDescribe', align: 'center'},
          {label: this.$t('规则值'), prop: 'rulesValue', align: 'center'},
        ],
        selectRows: []
      },
      editRulesVisible: false,
      editRules: {},
      productList: [],
      multiplexVisible: false,
      multiplexForm: {
        tableData: [],
        selectRows: []
      },
      deleteSelectRows: []
    }
  },
  props: {
    visibleBindRules: {},
    rows: {}
  },
  computed: {
    visibleProductTitle() {
      return this.rows.productName
    }
  },
  watch: {
    visibleBindRules(val) {
      if (val) {
        this.getRulesList()
      }
    }
  },
  methods: {
    async getRulesList() {
      const {productName} = this.rows
      const params = {
        ...this.listPage,
        productName
      }
      const res = await selectProductRules(params)
      if (res.code === 1) {
        const {list,total} = res.data
        this.listPage = Object.assign({}, this.listPage, {
          total: total
        })
        this.bindRules.tableData = list
      }
    },
    rulesCurrentChange(val) {
      this.listPage.pageNum = val
      this.getRulesList()
    },
    rulesSizeChange(val) {
      this.listPage.pageSize = val
      this.getRulesList()
    },
    addRulesSelectRows(value) {
      this.addRules.selectRows = value
    },
    addRulesClear() {
      this.addRules.selectRows = []
      this.$refs.addPage.resetFields()
    },
    addRulesSizeChange(val) {
      this.addPage.pageSize = val
      this.addRulesService()
    },
    addRulesCurrentChange(val) {
      this.addPage.pageNum = val
      this.addRulesService()
    },
    async addRulesService() {
      const {productName} = this.rows
      const params = {
        ...this.addPage,
        productName,
        type: this.listPage.type
      }


      const res = await selectRules(params)
      if (res.code === 1) {
        this.addRulesVisible = true
        const {list, pageSize, pageNum, total} = res.data
        this.addPage = Object.assign({}, this.addPage, {
          pageNum: pageNum,
          pageSize: pageSize,
          total: total
        })
        this.addRules.tableData = list.map(item => {
          if (item.rulesValueVice && item.rulesValue) {
            item.rulesValue = item.rulesValue + ' - ' + item.rulesValueVice
          }
          return item
        })
      }
    },
    async addRulesConfirm() {
      if (this.addRules.selectRows.length === 0) return this.$message.error(this.$t('请先勾选数据'))
      const {productName} = this.rows
      const rulesList = this.addRules.selectRows.map(item => item.rulesKey)
      const res = await addProductRules({
        productName,
        rulesList,
        type: this.listPage.type,
      })
      if (res.code === 1) {
        this.$message.success(this.$t('新增成功'))
        this.addRulesClear()
        this.getRulesList()
        this.addRulesVisible = false
      }
    },
    // 编辑规则
    editRulesService(row) {
      this.editRules = deepClone(row)
      /*
      *  @params{rulesType}  有规则区间 1 没有 0
      * */
      this.$set(this.editRules, 'rulesType', row.rulesValueVice ? 1 : 0)
      this.editRulesVisible = true
    },
    // 编辑规则提交
    async editRulesConfirm() {
      const {productName} = this.rows
      const params = {
        productName,
        ...this.editRules,
        type: this.listPage.type
      }
      const res = await updateProductRules(params)
      if (res.code === 1) {
        this.$message.success(this.$t('编辑成功'))
        this.editRulesVisible = false
        this.getRulesList()
      }
    },
    // 删除规则
    delRulesService(row) {
      this.$confirm(this.$t('确定删除?'), this.$t('提示'), {
        type: 'warning'
      }).then(async () => {
        const {productName, rulesKey} = row
        const res = await deleteProductRules({productName, rulesKey, type: this.listPage.type})
        if (res.code === 1) {
          this.$message.success(this.$t('删除成功'))
          this.getRulesList()
        }
      })
    },
    // 批量删除
    async batchDelete() {
      if (this.deleteSelectRows.length === 0) return this.$message.error(this.$t('请先勾选要删除的规则'))
      this.$confirm(this.$t('为避免造成损失，请确认是否进行该操作') + '？', this.$t('提示'), {
        type: 'warning'
      }).then(async () => {
        const res = await deleteProductRulesList(this.deleteSelectRows)
        if (res.code === 1) {
          this.$message.success(this.$t('操作成功'))
          this.getRulesList()
        }
      }).catch(() => {
      })

    },
    // 复用
    async multiplexService() {
      const data = await selectProduct().then(res => res.data)
      this.multiplexForm.tableData = data.filter(item => {
        return item.productName !== this.rows.productName
      })
      this.multiplexVisible = true
    },
    async multiplexConfirm() {
      if (this.multiplexForm.selectRows.length === 0) return this.$message.error(this.$t('请选择分配的APP'))
      const {productName} = this.rows
      const productNameList = this.multiplexForm.selectRows.map(item => item.productName)
      const res = await reuseProductRules({
        productNameList,
        productName,
        type: this.listPage.type
      })
      if (res.code === 1) {
        this.$message.success(this.$t('新增成功'))
        this.multiplexVisible = false
      }
    },
    bindRulesClose() {
      this.bindRules.tableData = []
      this.$emit('update:visibleBindRules', false)
    }
  }
}
</script>

<style scoped>

</style>
